<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        height: 200vh;
        overflow: visible;
    }
    #editor{
        height: 100%;
        min-height: 500px;
        width: 100%;
    }
</style>
<body>
    <div id="app">
        <el-input v-model="value" @focus="value = ''"></el-input>
        <p></p>
        <el-row>
            <el-col :span="6">
                <p id="repeat" class="repeat" 
                    data-clipboard-action="copy" 
                    :data-clipboard-text="oldVal">
                    当前的复制为：{{ oldVal }}
                </p>
            </el-col>
            <el-col :span="16">
                <el-button @click="cccc" @mouseenter="cccc">重新拷贝</el-button>     
                <el-button 
                        type="primary"
                        @click="copykeyword" 
                        data-clipboard-action="copy" 
                        data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">复制keywords</el-button>           
            </el-col>
        </el-row>
        <el-row>
            <el-card style="width: 1200px;margin: 40px auto;">
                <el-col :span="12" v-for="(item,j) in list" :key="'aa'+j" class="bbbb" :id="`aaaa${j}`">
                    <el-button 
                        :type="j % 2 == 1 ? 'primary' : ''"
                        @click="copy(item,j,j<3 ? 'push' : '')" 
                        data-clipboard-action="copy" 
                        data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">{{ item }} </el-button>
                  </el-col>
            </el-card>
            
            <el-card style="width: 1200px;margin: 20px auto;">
                <el-col :span="12">
                    
                  </el-col>
            </el-card>


        </el-row>

        <el-row>
            <el-col :span="4">
                <el-form label-position="left" label-width="6em">
                    <el-form-item label="当前模块">
                        <el-input v-model="keyval" placeholder=""></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-button type="primary" @click="key = keyval">修改</el-button>
            
            
            <el-button type="primary" @click="()=>{key = 'appointment',keyval='appointment'}">appointment</el-button>
            <el-button type="primary" @click="()=>{key = 'overview',keyval='overview'}">overview</el-button>


        </el-row>

        <el-row>
            <div style="display: inline-block;">
                <el-form label-position="left" inline >
                    <el-form-item label="" style="width: 150px">
                        <el-select v-model="startLang" disabled>
                            <el-option label="英文" value="en"></el-option>
                            <el-option label="韩文" value="kor"></el-option>
                            <el-option label="中文" value="zh"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="翻译为" style="width: 210px">
                        <el-select v-model="endLang" style="width: 150px">
                            <el-option label="英文" value="en"></el-option>
                            <el-option label="韩文" value="kor"></el-option>
                            <el-option label="中文" value="zh"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="primary" @click="setTranslate">一键翻译</el-button>
            <el-button type="primary" @click="getDir">查看结果</el-button>
        </el-row>

        <el-dialog
            title="查看结果"
            :visible.sync="IsInfo"
            width="600px">
            <el-collapse>
                <el-collapse-item :title="key" :name="key" v-for="(item,key) in dir" :key="key">
                    <div v-for="(content,path) in item" :key="path">
                        <span style="width: 100px;display: inline-block;">{{path}}</span>
                        <el-button type='text'><a :download="path" :href="'/'+key+'/'+path">下载</a> </el-button>
                        <el-button type='text' @click="openPre(key,path,content)">编辑</el-button>
                    </div>
                </el-collapse-item>
            </el-collapse>
            <span slot="footer" class="dialog-footer">
                <el-button @click="IsInfo = false">关闭</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :title="titlePre"
            :visible.sync="IsInfoPre"
            width="600px">
            <pre id="editor">{{contentPre}}</pre>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updata" type="primary">保存</el-button>
                <el-button @click="IsInfoPre = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
    <style>
        .bbbb{
            margin-bottom: 20px;
        }
    </style>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
    <script src='https://www.jq22.com/demo/clipboard.js-master201703170013/dist/clipboard.min.js'></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://cdn.bootcss.com/ace/1.2.4/ace.js"></script>
    <script src="http://cdn.bootcss.com/ace/1.2.4/ext-language_tools.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        


        var vue = new Vue({
            el:'#app',
            data(){
                return {
                    dir: {},
                    startLang: 'zh',
                    endLang: 'kor',
                    value:'',
                    key:'',
                    IsInfo: false,
                    contentPre: '',
                    titlePre: '',
                    IsInfoPre: false,
                    keyval:'appointment',
                    oldVal:'',
                }
            },
            computed:{
                list(){
                    return [
                        `$t('${this.key}.')`,
                        `{{ $t('${this.key}.') }}`,
                        `this.$t('${this.key}.')`,
                    ]
                }
            },
            methods:{
                updata(){
                    axios.put('/updata/file',{
                        content: this.editor.getValue(), 
                        path: this.titlePre
                    }).then(res => {
                        if(res.data.code==200) {
                            this.$message.success('编辑成功');
                            this.IsInfoPre = false
                        } else {
                            this.$message.error('编辑失败');
                        }
                    })
                },
                openPre(key,path,content){
                    this.IsInfoPre=true;
                    this.titlePre=key+'/'+path;
                    this.contentPre=content.trim();
                    setTimeout(()=>{
                        if(this.editor) {
                            this.editor.setValue(content.trim())
                        } else {
                            this.initEditor()
                        }
                    },100)
                },
                initEditor(){
                    var editor = ace.edit("editor");
                    editor.setTheme("ace/theme/monokai");
                    editor.session.setMode("ace/mode/javascript");
                    editor.setOptions({
                        enableBasicAutocompletion: true,
                        enableSnippets: true,
                        enableLiveAutocompletion: true
                    });
                    this.editor = editor

                },
                getDir(){

                    axios.get('/getDir').then(res => {
                        if(res.data.code==200) {
                            this.dir = res.data.data;
                            this.IsInfo = true
                        } else {
                            this.$message.error('获取失败');
                        }
                    })
                },
                setTranslate(){
                    axios.get('/translate?endLang='+this.endLang+'&startLang='+this.startLang).then(res => {
                        if(res.data.code==200) {
                            this.$message.success('翻译成功');
                        } else {
                            this.$message.error(res.data.message||'翻译失败');
                        }
                    })
                },
                copykeyword(e){
                    let xxx = new Clipboard(e.target, {
                        text: () => `"${this.value}":"${this.value}",`
                    });
                },
                cccc(e){
                    let xxx = new Clipboard(e.target, {
                        text: () => this.oldVal
                    });
                },
                copy(item,i,push){
                    push = push+i;
                    let a,b;
                    if(push){
                        if(push=='push0'){
                            a = item.slice(0,item.length-2);
                            b = item.slice(item.length-2,item.length);
                        }else if(push == 'push1'){
                            a = item.slice(0,item.length-5);
                            b = item.slice(item.length-5,item.length);
                        }else if(push == 'push2'){
                            a = item.slice(0,item.length-2);
                            b = item.slice(item.length-2,item.length);
                        }
                    }
                    let v = this.value
                    var clipboard = new Clipboard(`#aaaa${i}`, {
                        text: function () {
                            return push && a && b ? a+v+b : item;
                        }
                    });
                    this.$message.success('复制成功');
                    this.oldVal = (push && a && b ? a+v+b : item);
                }
            }
        })
    </script>
</body>
</html>